<template>
    <div>
        <div class="section_common">
            <!--<div class="select_nav">
                    <div :class="navActive == 1 ? 'active' : ''" @click="changeNavActive">
                        <van-badge :content="number" >
                        待处理 <span style="margin-left: 10px"> </span>&lt;!&ndash;<van-badge style="font-size: 16px" :content="number" />&ndash;&gt;
                        </van-badge>
                    </div>
            </div>-->
            <div class="select_area">
                <el-input
                        v-model="search.keyword"
                        size="mini"
                        placeholder="请输入查询内容"
                        prefix-icon="el-icon-search"
                        style="margin-right: 20px"
                ></el-input>
                <el-select v-model="search.type" size="mini" filterable placeholder="请选择" style="margin-right: 20px;min-width: 100px">
                    <el-option label="选择类型" value=""></el-option>
                    <el-option
                            v-for="item in qtypes"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>

                <el-button size="mini" type="primary" @click="findSearchQuestion">搜索
                </el-button>
                <el-button type="primary" size="mini" plain icon="el-icon-plus" @click="addQuestion">添加</el-button>
            </div>
            <div class="main">
                <div class="item" v-for="(item,index) in applys" :key="index">
                    <div v-on:click="spdetail(item)">
                        <div class="info">
                            <div class="title">
                                {{item.title}}
                            </div>
                            <div class="content">{{item.content}}</div>
                            <div class="time">{{item.createdTime.substring(0,10)}}</div>
                            <div class="qtype">{{item.qtype}}</div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <el-dialog
                title="新增"
                :visible.sync="dialogVisible"
                width="60%"
                :close-on-click-modal='false'
                :before-close="handleClose">

            <div class="edit_post">
                <div class="title">
                    <input
                            type="text"
                            v-model="form.title"
                            placeholder="标题"
                    />
                </div>
                <div class="content">
						<textarea
                                v-model="form.content"
                                placeholder="内容描述"
                        ></textarea>
                </div>
                <div class="post_type_area">
                    <div class="title">选择类型</div>
                    <el-select v-model="form.qtype" filterable allow-create default-first-option placeholder="请选择" size="mini">
                        <el-option
                                v-for="item in qtypes"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                    <el-tag size="mini" style="margin-left: 10px">无所需类型时，直接填写即可</el-tag>
                </div>
                <!--<div class="post_type_area" v-if="this.form.qtype==''">
                    <div class="title">类型</div>
                    <el-input v-model="form.qtype" size="mini" label-width="200px"></el-input>
                </div>-->
                <div class="img_area">
                    <el-upload
                            action="#"
                            multiple
                            :limit="9"
                            :file-list="form.fileList"
                            list-type="picture-card"
                            :auto-upload="false"
                            :on-remove="handleRemove"
                            :on-change="fileChange"
                    >
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{ file }">
                            <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url"
                                    alt=""
                            />
                            <span class="el-upload-list__item-actions">
									<span
                                            class="el-upload-list__item-delete"
                                            @click="handleRemove(file)"
                                    >
										<i class="el-icon-delete"></i>
									</span>
								</span>
                        </div>
                    </el-upload>
                </div>
            </div>

            <!--<el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input type="textarea" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.qtype" placeholder="请选择类型" size="mini">
                        <el-option label="OA" value="OA"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>-->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="handleClose">取消</el-button>
            </span>
        </el-dialog>

        <van-pagination v-show="showPage" @change="findSearchQuestion()" v-model="currentPage" :total-items="totalNum" :items-per-page="10" force-ellipses>
            <template #prev-text>
                <van-icon name="arrow-left" />
            </template>
            <template #next-text>
                <van-icon name="arrow" />
            </template>
        </van-pagination>

    </div>
</template>

<script>
    import Vue from 'vue';
    import {Pagination,Icon,Badge  } from "vant"

    Vue.use(Pagination);
    Vue.use(Icon);
    Vue.use(Badge);

    export default {
        data() {
            return {
                applys: [],
                number:0,
                search: {
                    keyword: "",
                    type:"",
                },
                qtypes:[],//所有可选择的问题类型

                nowUser: JSON.parse(localStorage.getItem("userInfo")).userId,
                currentPage:1,
                totalNum:1,
                showPage:true,

                dialogVisible: false,//新建窗口的展示

                form: {
                    title: '',   //标题
                    content: '',  //内容
                    qtype:'',//类型
                    fileList: [],//图片
                },
                input: "",
                value: [],
            };
        },

        created() {
            this.getQuestionType();
            this.findSearchQuestion();//初始化查询所有的方法
        },
        methods: {

            //获取目前所有的类型
            getQuestionType(){
                this.$https.post('/mobiles/getQuestionType')
                    .then((res) => {
                        this.qtypes = res.data.data
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            },

            //点击新建按钮，打开新建页面
            addQuestion(){
              this.dialogVisible=true;
            },
            // 图片上传事件
            handleRemove(file) {
                console.log(file, this.form.fileList)
                let uid = file.uid
                let delIndex
                this.form.fileList.forEach((e, index) => {
                    if (e.uid == uid) {
                        delIndex = index
                    }
                })
                this.form.fileList.splice(delIndex, 1)
                console.log(this.form.fileList)
            },
            fileChange(file, fileList) {
                this.form.fileList = fileList
                console.log(fileList)
            },
            //提交新建的表单内容
            onSubmit(){

                if (this.form.title=='' || this.form.content=='' || this.form.qtype=='' || this.form.qtype==' '){
                    this.$toast({
                        message:
                            '标题,内容,类型不能为空，请填写后再操作。',
                    })
                    return
                }

                //封装参数
                let FD = new FormData()
                FD.append("title",this.form.title)
                FD.append("content",this.form.content)
                FD.append("qtype",this.form.qtype)
                FD.append("nowUser",this.nowUser)
                //根据图片构建图片上传
                let tempImgArr = []
                for (let i = 0; i < this.form.fileList.length; i++) {
                    if (this.form.fileList[i].raw) {
                        FD.append('image', this.form.fileList[i].raw)
                    } else {
                        tempImgArr.push(this.form.fileList[i].url)
                    }
                }
                /*if (tempImgArr.length != 0) {
                    FD.append('imageUrl', tempImgArr)
                }*/

                this.$https.post('/mobiles/addSearchQuestion', FD).then((res) => {
                    if (res.data.code == 200){
                        this.$toast({
                            message: '添加成功',
                        })
                        this.dialogVisible = false;//关闭弹窗
                        this.findSearchQuestion();//刷新界面
                        this.form.title='';
                        this.form.content='';
                        this.form.qtype='';
                        this.form.fileList=[];
                        this.getQuestionType();//提交后重新查找一遍类型
                    }else {
                        this.$toast({
                            message: '添加失败：' + res.data.message,
                        })
                    }

                }).catch(err => {
                    console.log(err);
                });
            },

            handleClose() {
                //this.form.qtype=''
                this.dialogVisible=false
                /*this.$confirm('确认关闭？')
                    .then(() => {
                        done();
                    })
                    .catch(() => {
                    });*/
            },

            //点击可查看详情页
            spdetail(item){
                var name='QuestionDetail'
                this.$router.push({
                    name, params: {'id': item.id}
                });
                /*if (item.path){
                    this.$router.push(item.path)
                }*/
            },

            //查找存在的问题
            findSearchQuestion(){
                this.$https.post('/mobiles/findSearchQuestion', {
                    keywords:this.search.keyword,
                    type:this.search.type,
                    currentPage:this.currentPage
                }).then(res => {
                    if (res.data.data.total || res.data.data.total===0){
                        this.totalNum=res.data.data.total;
                        this.applys=res.data.data.records;
                    }else {
                        this.applys=res.data.data;
                        this.number=res.data.data.length;
                    }
                }).catch(err => {
                    console.log(err)
                });
            }
        },
    };
</script>

<style lang="scss" scoped>
    .search_input,
    .select_area {
        margin-top: 10px;
        display: flex;
    }

    .main {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        margin-top: 10px;

        .item {
            display: flex;
            flex-flow: column nowrap;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin-bottom: 5px;
            padding: 10px;
            font-size: 14px;
            background-color: white;

            .info {

                .title {
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    font-weight: bold;
                    font-size: 18px;
                }
                .content{
                    font-size: 14px;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                }
                .qtype{
                    float: right;
                    margin-right: 20px;
                }
                .time{
                    float: right;
                }
            }
        }
    }

    .edit_post {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        & > div {
            width: 100%;
            margin-bottom: 20px;
        }
        .title {
            input {
                width: 100%;
                border: none;
                padding: 10px;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
        }
        .content {
            textarea {
                width: 100%;
                border: none;
                min-height: 100px;
                padding: 10px;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
        }
    }
    .disabled .el-upload--picture-card {
        display: none !important;
    }
    .post_type_area {

        display: flex;

        .title {
            margin-right: 10px;
        }
        .el-input{
            width: 200px;
        }
    }
</style>
